<template>
  <div class="operation-log-list">
    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="调用编号">
            <a-input
              v-model="searchData.callNumber"
              placeholder="输入模型调用编号搜索"
              :style="{
                width: '200px',
              }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="业务编号">
            <a-input
              v-model="searchData.seqId"
              placeholder="输入业务编号搜索"
              :style="{
                width: '200px',
              }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="更多筛选">
            <a-checkbox-group
              v-model="searchData.checkbox"
              @change="handleChange"
              :options="[
                {
                  label: '预测和真实不一致的',
                  value: 'isDiff',
                },
                {
                  label: '回流数据',
                  value: 'isBackFlow',
                },
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-row :gutter="24" class="total-count-row">
      <a-col :span="4">
        总数据：<span class="total-count">{{ dataSource.total }}</span> 条</a-col
        >
      <a-col
        :span="4"
      >回流数据量：<span class="total-count">{{ dataSource.backFlowSize }} </span>条</a-col
      >
      <a-col
        :span="4"
      >预测和真实不一致量：<span class="total-count">{{ dataSource.diffSize }} </span>条</a-col
      >
    </a-row>
    <s-table
      ref="table"
      size="default"
      rowKey="callNumber"
      :columns="columns"
      :data="loadData"
      :alert="false"
      showPagination="auto"
    >
      <span slot="customTitle">
        真实标签值
        <a-tooltip>
          <template slot="title"> 无回流数据时，真实标签值取预测值 </template>
          <a-icon type="question-circle" theme="filled" class="question-icon" />
        </a-tooltip>
      </span>
    </s-table>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { STable } from '@/components'
import { getBackFlowDetail } from '@/api/monitor'

const columns = [
  {
    title: '标签回流时间',
    dataIndex: 'callTime',
    width: 120,
  },
  {
    title: '模型调用编号',
    dataIndex: 'callNumber',
    width: 120,
  },
  {
    title: '业务编号',
    dataIndex: 'seqId',
    width: 120,
  },
  {
    title: '预测标签值',
    dataIndex: 'pLabel',
    customRender: (text, record) => {
      return record.pLabel || '--'
    },
    width: 180,
  },
  {
    dataIndex: 'tLabel',
    slots: { title: 'customTitle' },
    customRender: (text, record) => {
      return record.tLabel || '--'
    },
    width: 180,
  },
]
export default defineComponent({
  name: 'ModelPerformanceDetail',
  components: {
    STable,
  },
  props: {
    queryParam: {
      type: Object,
      default: () => {},
    },
    dataSource: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      columns,
      visible: false,
      searchData: {
        callNumber: '',
        seqId: '',
        isBackFlow: false,
        isDiff: false,
      },
    }
  },
  mounted() {},
  watch: {
    searchData: {
      handler(newVal, oldVal) {
        this.$refs.table.refresh(true)
      },
      deep: true,
    },
  },
  methods: {
    searchHandle() {
      this.$refs.table.refresh(true)
    },
    handleChange(val) {
      val.forEach((item) => {
        this.searchData[item] = true
      })
    },
    loadData(parameter) {
      //         callNumber
      // CALL_20250803_001
      // curPage
      // 1
      // endTime
      // 1754179200000
      // isBackFlow
      // isDiff
      // false
      // modelUuid
      // d76648b316d91d48
      // pageSize
      // 100
      // seqId
      // SEQ_20250803_001
      // startTime
      // 1754179200000
      // version
      // V1
      const searchData = {
        ...this.searchData,
      }
      if (searchData.checkbox && searchData.checkbox.length) {
        delete searchData.checkbox
      }
      const requestParameters = Object.assign(
        {},
        this.queryParam,
        {
          curPage: parameter.pageNo,
          pageSize: 100,
        },
        this.searchData
      )

      console.log('loadData request parameters:', requestParameters)
      return getBackFlowDetail(requestParameters).then((res) => {
        const { backFlow } = res.data
        if (backFlow) {
          res.data.data = backFlow
          delete res.data.backFlow
        }
        return res.data
      })
    },
  },
})
</script>

<style scoped lang="less">
.operation-log-list {
  .question-icon {
    font-size: 12px;
    color: @primary-color;
  }
  .total-count-row {
    padding: 12px 0;
    .total-count {
      color: red;
    }
  }
}
</style>
